<template>

	<!-- 页面全局配置 -->
	<view class="pageconfig">

		<!--顶部标题0的布局样式-->
		<view v-if="categoryThreeId != ''" class="title" style="position: fixed;top: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
			<view class="cu-bar bg-white">
				<view class="action">
				</view>
				<view class="content text-bold text-"> {{categoryThreeName}}</view>
			</view>
		</view>


		<!--vuetop-->
		<view class="  commoncss0   ">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" v-model="keyword" type="text" placeholder="请搜索商品" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-green shadow-blur round" @tap="findPage">搜索</button>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="  label1  commoncss1   ">
			<view class="cu-card article no-card">
				<view class="cu-item shadow" style="padding: 20rpx 0;" @click="goodsDetails(item)" v-for="(item,index) in data.records" :key="index">
					<view class="content" style="padding: 0; flex-direction:row">
						<image class=" margin-lr-sm goodsImage" :src="item.coverPic" mode="aspectFill"></image>
						<view class="desc margin-lr-sm">
							<view class=" text-black text-lg goodsName">{{item.name}}</view>
							<view class=" text-black text-lg minPrice">￥{{item.minPrice}}</view>
							<view class="flex justify-between">
								<view class="text-gray">已售: {{item.salesNum}}</view>
							</view>
							<!-- <view> -->
							<!-- <view class="cu-tag bg-red light sm round">正品保障</view> -->
							<!-- 	<view class="cu-tag bg-red light sm round">包邮 </view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 分页 -->
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text> 共 {{ data.total }} 条 - {{ data.current }} / {{ data.pages }} 页 </text>
			</view>
			<view class="padding flex flex-wrap justify-between align-center bg-white">
				<button @tap="prePage()" style="" class="cu-btn">上一页</button>
				<button @tap="nextPage()" class="cu-btn">下一页</button>
			</view>
		</view>

	</view>
</template>


<script>
	import pageUtil from '@/static/js/pageUtil.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				noMore: false,
				/**single**/
				data: {
					records: []
				},
				current: 1, // 页数
				size: 5, // 每页条数
				keyword: "", // 搜索关键字 
				categoryThreeId: "", // 3级分类Id
				categoryThreeName: "", // 3级分类名
			};
		},
		onLoad(option) {
			if (option.categoryThreeId != null) {
				this.categoryThreeId = option.categoryThreeId;
				this.categoryThreeName = option.categoryThreeName;
			}
			this.findPage();
		},
		methods: {
			/**
			 * 分页查询
			 */
			findPage() {

				let params = {
					current: this.current,
					size: this.size,
					keyword: this.keyword,
					categoryThree: this.categoryThreeId
				}
				// 商品
				this.crud.get(this.path, "/api/client/all/goods/findPage", params).then(res => {
					this.data = res.data.data;
				})
			},


			/**
			 * 点击商品
			 */
			goodsDetails(item, index) {
				uni.navigateTo({
					url: "/pages/fpage1/goods/details?id=" + item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			/**
			 * 上一页
			 */
			prePage() {
				pageUtil.prePage(this)
			},
			/**
			 * 下一页
			 */
			nextPage() {
				pageUtil.nextPage(this)
			},


			/**method**/
			//获取数据

		}
	}
</script>

<style lang="less">
	page {
		background-color: #F8F9FB;
	}

	.goodsName {
		width: 400rpx !important;
		text-align: left;
		margin-top: 0%;
		margin-left: 0%;
		/* 超出范围的显示... */
		overflow: hidden;
		/*隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/* 超出部分省略号 */
	}

	.minPrice {
		text-align: left;
		margin-top: 0%;
		margin-left: 0%;
		color: #ff5500;
	}



	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 14%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}



	/**pagedomcss**/



	/**本页搜索组件0的css代码**/
	.commoncss0 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**本页文章1的css代码**/
	.commoncss1 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}


	.title {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}
	


	/**vuecss**/
</style>
